<template>
  <div class="login_body">
    <div class="login_panel">
      <div class="login_title">用户登录</div>
      <el-form :model=formData :rules="rules" ref="formDataRef">
        <el-form-item prop="account">
          <el-input placeholder="请输入账号" v-model="formData.account" size="large">
            <template #prefix>
              <span class="iconfont icon-account"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="formData.password" size="large">
            <template #prefix>
              <span class="iconfont icon-password"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkCode">
          <div class="check_code_panel">
            <el-input placeholder="请输入验证码" v-model="formData.checkCode" class="input_panel" size="large" />
            <img @click="changeCheckCode" :src="checkCodeUrl" alt="" class="check_code">
          </div>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox v-model="formData.rememberMe" :label="true">记住我</el-checkbox>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="login" type="primary" :style="{ width: '100%' }">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import md5 from 'js-md5'
import { getCurrentInstance, reactive, ref } from 'vue'
import VueCookies from 'vue-cookies'    
import router from '../router';
const { proxy } = getCurrentInstance();


const api = {
  checkCode: "/api/checkCode",
  login: 'login'
}

const checkCodeUrl = ref(api.checkCode)
const changeCheckCode = () => {
  checkCodeUrl.value = api.checkCode + '?' + new Date().getTime();
}

const formDataRef = ref()
const formData = reactive({});

const rules = {
  account: [{
    required: true,
    message: '请输入用户名'
  }],
  password: [{
    required: true,
    message: '请输入密码'
  }],
  checkCode: [{
    required: true,
    message: '请输入验证码'
  }],
}

const init = () => {
  const loginInfo = proxy.VueCookies.get('loginInfo');
  if (!loginInfo) {
    return;
  }
  Object.assign(formData, loginInfo)

  document
}
init();

const login = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }

    let cookieLoginInfo = VueCookies.get('loginInfo')
    let cookiePassword = cookieLoginInfo == null ? null : cookieLoginInfo.password
    if (formData.password !== cookiePassword) {
      formData.password = md5(formData.password)
    }

    let params = {
      account: formData.account,
      password: formData.password,
      checkCode: formData.checkCode,
    }

    let res = await proxy.Request({
      url: api.login,
      params: params,
      errorCallback: () => {
        changeCheckCode();
      }
    })
    if (!res) {
      return;
    }

    proxy.Message.success('登录成功');
    setTimeout(() => {
      router.push('/')
    }, 1000)
    const loginInfo = {
      account: params.account,
      password: params.password,
      rememberMe: formData.rememberMe
    }

    proxy.VueCookies.set('userInfo', res.data, 0)
    if (formData.rememberMe) {
      proxy.VueCookies.set('loginInfo', loginInfo, '7d')
    }
  })
}
</script>

<style lang="scss">
.login_body {
  width: 100%;
  height: calc(100vh);
  background-image: url(../assets/login-bg.jpg);
  background-size: cover;
  background-position: center;

  .login_panel {
    width: 350px;
    background-color: rgb(225, 225, 225, 0.8);
    float: right;
    padding: 20px;
    margin-right: 100px;
    margin-top: 100px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #ddd;

    .login_title {
      font-size: 20px;
      text-align: center;
      margin: 10px;
    }

    .check_code_panel {
      display: flex;

      .input_panel {
        flex: 1;
        margin-right: 15px;
      }

      .check_code {
        cursor: pointer;
      }
    }
  }
}
</style>